<!DOCTYPE html>
<html>
<head>
    <title>OpenSeadragon fitBoundsWithConstraints() Demo</title>
    <script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
    <style type="text/css">

      .openseadragon1 {
          width: 800px;
          height: 600px;
      }

      #highlights li {
        cursor: pointer;
      }

    </style>
</head>
<body>
    <div>
        <p>Simple demo to see panning improvements using the following settings:</p>
        <ul>
            <li>homeFillsViewer: true</li>
            <li>showZoomControl: false,</li>
            <li>constrainDuringPan: true,</li>
            <li>visibilityRatio: 1,</li>
        </ul>
    </div>

    <div id="contentDiv" class="openseadragon1"></div>

    <script type="text/javascript">

        var _viewer;

        var _viewer = OpenSeadragon({
            element: document.getElementById("contentDiv"),
            tileSources:  "https://openseadragon.github.io/example-images/duomo/duomo.dzi",
            homeFillsViewer: true,
            showZoomControl: false,
            constrainDuringPan: true,
            visibilityRatio: 1,
            prefixUrl: "../../build/openseadragon/images/",
            minZoomImageRatio: 1,
            crossOriginPolicy: 'Anonymous',
        });
    </script>
</body>
</html>
